<script setup>
import {ref,watch} from 'vue'
import { fetchIndicesData } from '@/api/weatherAPI';
import { useCityStore } from '../stores/cityStore';
const cityStore = useCityStore()
// 引入路由
import { useRouter } from "vue-router";
//获取路由router实例
const router = useRouter()
watch(
  //数据源
  ()=>cityStore.location,
  ()=>{
    //当侦听到数据源(location)发生变化时，应该重新发起网络请求
    getData(cityStore.location.id)
  },
  //及时回调，数据源没有改变的初始状态下执行回调函数一次
  {immediate : true}
)
const indicesDaily = ref([])
//网络请求
async function getData(locationID) {
   const res = await fetchIndicesData(locationID,0)
    console.log(res) 
    indicesDaily.value = res.daily
}
//生活指数列表项的单击事件
function selectItem(item){
    router.push(`/livingdetail/${item.type}`)
}
</script>

<template>
    <div class="indice">
        <h3>生活指数</h3>
        <ul>
            <li v-for="(item , i) in indicesDaily" :key = "i"@click="selectItem(item)">
                <p>{{ item.name }}</p>
                <p>{{ item.category }}</p>
            </li>
        </ul>
    </div>
</template>
<style scoped>
.indice{
    background-color: #efece7;
    border-radius: 1rem;
    padding: 2rem;
}
.indice>h3{
    text-align: center;
}
.indice>ul{
    list-style: none;
    padding:0;
    display:grid;
    grid-template-columns:1fr 1fr 1fr 1fr;
    grid-gap:1rem;
    gap: 1rem;
}
.indice>ul>li{
    background-color: #f1f1f1;
    border-radius: 0.5rem;
    cursor: pointer;
    height: 4rem;
    text-align: center;
}
.indice>ul>li>p:nth-of-type(1){
    font-weight: bolder;
}
.indice>ul>li>p:nth-of-type(2){
    font-size: 0.8rem;
}

</style>